<!DOCTYPE html>
<div>
  <div style="width: 20px; height: 20px; background: lightgray; display: inline-block; margin: 10px" tabindex="0" aria-label="rect1">1</div>
  <div style="width: 20px; height: 20px; background: lightgray; display: inline-block; margin: 10px" tabindex="0" aria-label="rect2">2</div>
  <div style="width: 20px; height: 20px; background: lightgray; display: inline-block; margin: 10px" tabindex="0" aria-label="rect3">3</div>
  <div style="width: 20px; height: 20px; background: lightgray; display: inline-block; margin: 10px" tabindex="0" aria-label="rect4">4</div>
  <div style="width: 20px; height: 20px; background: lightgray; display: inline-block; margin: 10px" tabindex="0" aria-label="rect5">5</div>
</div>
<iframe src="text_ranges_iframe.html" style="width: 300px; height: 60px; margin: 20px"></iframe>
